<template>
  <div class="water_wrap" style="height: 100%;overflow: auto;">
    <div class="tab">
      <span v-for="(item, index) in tabList" :key="index" :class="{ activeTab: selectNum == index }" class="tabTit"
        @click="onHeadMeun(item, index)">
        {{ item }}
      </span>
    </div>
    <div v-loading="isLoading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
      style="height:calc((100% - 100px))" class="shortinfoDiv">
      <div v-if="selectNum == 0">
        <div class="tableBox tableboxtop">
          <el-collapse accordion>
            <el-collapse-item class="collapsecont m-t-5" v-for="(item, index) in dataList" :key="index">
              <template slot="title">
                <i :class="'FlowColorLevel' + item.level" />
                {{ item.levelName }} <span class="rightTitle">{{ item.rcount }}条河流</span>
              </template>
              <div class="stationLst  m-t-5">
                <div class="titleList">
                  <span>河段编码</span>
                  <span>影响村庄<br>数量</span>
                  <span>村庄人口<br>(人)</span>
                  <span>洪峰流量<br>(m³/s)</span>
                  <span>峰现时间</span>
                </div>
                <ul class="stationLstul">
                  <template v-if="item.rvcdList.length > 0">
                    <li class="m-t-5" v-for="(stationRvcdList, indexRvcdList) in item.rvcdList" :key="indexRvcdList"
                      @click="onClickShowDetail(stationRvcdList)">
                      <span> 
                        <el-tooltip class="item" effect="dark" :content="stationRvcdList.rvcd" placement="top-start">
                          <a>{{ stationRvcdList.rvcd }}</a>
                        </el-tooltip>  
                      </span>
                      <span>{{ stationRvcdList.adcdCount? stationRvcdList.adcdCount : "--" }}</span>
                      <span>{{ stationRvcdList.pCount? stationRvcdList.pCount : "0" }}</span>
                      <span>{{ stationRvcdList.maxq? stationRvcdList.maxq : "0" }}</span>
                      <span>{{ stationRvcdList.mxtm ? $moment(stationRvcdList.mxtm).format("MM-DD HH:mm") : "--" }}</span>
                    </li>
                  </template>
                  <!-- <template v-else>
                    <div class="noDataLists">暂无数据</div>
                  </template> -->
                  <template  v-else>
                    <div slot="no-results" class="noData2">暂无数据</div>
                  </template>
                </ul>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div v-if="selectNum == 1">
        <div class="titleList m-t-5">
          <span>名称</span>
          <span>乡镇名称</span>
          <span>影响房屋<br>(栋)</span>
          <span>影响人口<br>(个)</span>
          <span>淹没水深<br>(m)</span>
        </div>
        <div class="tableBox">
          <div class="stationLst">
            <ul class="stationLstul">
              <template v-if="VillageList.length > 0">
                <li class="m-t-5" v-for="(stationVillageList, indexVillageList) in VillageList" :key="indexVillageList"
                  @click="rowHandleclickPosition(stationVillageList)">
                  <span>{{ stationVillageList.ewName? stationVillageList.ewName : "--" }}</span>
                  <span>{{ stationVillageList.townAdnm? stationVillageList.townAdnm : "--" }}</span>
                  <span>{{ stationVillageList.house? stationVillageList.house : "0" }}</span>
                  <span>{{ stationVillageList.pCount? stationVillageList.pCount : "0" }}</span>
                  <span>{{ stationVillageList.h? stationVillageList.h : "0" }}</span>
                </li>
              </template>
              <template  v-else>
                <div slot="no-results" class="noData">暂无数据</div>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {
  GetFlowList,
  GetFlowcubeList,
  GetVillage
} from '@/api/zyx.js'
export default {
  components: {
    // FlowAnalysisInfo
  },
  data() {
    return {
      selectNum: 0,
      tabList: ['河道流量信息', '村庄受淹情况'],
      dataList: [],
      dataYmList: [],
      VillageList: [],
      myChart: {},
      perioD_END: '',
      isLoading: false
    }
  },

  created() {
    this.$eventBus.$on('EB_YB_HS_Card_Click', res => {
      // alert(111)
      this.dataList = []
      this.VillageList = []
      this.GetData(res)
      this.perioD_END = this.$moment(res.perioD_END).format('YYYY-MM-DD HH:mm:ss')
    })
  },
  methods: {
    onHeadMeun(item, index) {
      this.selectNum = index
    },
    rowHandleclickPosition(res) {
      console.log(res);
      this.$eventBus.$emit('flyToHSFX', res.ewCode)
      const dlgParams = this.$store.getters.dlgParams
      dlgParams.name = 'DLGYYFXD'
      var params = {
        id: {
          "prop": res
        }
      }
      params.id.prop['rvcd'] = res.ewCode
      params.id.prop['Ewcode'] = res.ewCode
      params.id.prop['id'] = res
      dlgParams.params = res
      this.$store.dispatch('dlgParams', dlgParams)
    },
    initright() {
      this.dataList = []
      this.VillageList = []
      this.isLoading = false
    },
    onClickShowDetail(data) {
      data.perioD_END = this.perioD_END
      const dlgParams = this.$store.getters.dlgParams
      dlgParams.name = 'FloodAnalysisInfo'
      dlgParams.params = data
      this.$store.dispatch('dlgParams', dlgParams)
      this.$eventBus.$emit('flyToRIVL', data.rvcd)
    },
    GetData(paramList) { // 对接列表数据
      this.isLoading = true
      const param = {
        dtTime: this.$moment(paramList.perioD_END).format('YYYY-MM-DD HH:mm:ss'),
        wswscd: paramList.wswscd
      }
      this.$store.commit('mapLoadingPush', '请求河道流量信息...')
      if (paramList.floodAnalysisMode === 'rate') {
        GetFlowList(param).then((res) => {
          this.isLoading = false

          if (res.isSuccess) {
            this.dataList = res.data.filter(function (item, index) {
              return item.rvcdList.length > 0
            })
            this.$eventBus.$emit('EB_YB_HS_INFO_List', this.dataList, this.perioD_END)
            this.$store.commit('mapLoadingDel', '请求河道流量信息...')
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        GetFlowcubeList(param).then((res) => {
          this.isLoading = false
          if (res.isSuccess) {
            this.dataList = res.data.filter(function (item, index) {
              return item.rvcdList.length > 0
            })
            this.$eventBus.$emit('EB_YB_HS_INFO_List', this.dataList, this.perioD_END)
            this.$store.commit('mapLoadingDel', '请求河道流量信息...')
          } else {
            this.$message.error(res.message)
          }
        })
      }
      const paramVillage = {
        // guid: paramList.fnid
        id: paramList.fnid
      }
      GetVillage(paramVillage).then((res) => {
        this.isLoading = false
        if (res.isSuccess) {
          this.VillageList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.shortinfoDiv {
  >div {
    // height: 49%;
    height: 100%;
    // overflow-y: auto;
  }
}

.tab {
  justify-content: center;
}

.tableBox {
  height: 100%;
  overflow-y: auto;

  i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 5px;
  }
}

.tableboxtop {
  height: calc((100% - 45px));
}

.stationLst ul li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stationLst ul li {
  padding: 3px 5px;
}

/deep/.el-collapse-item__header {
  padding-left: 6px;
}

.FlowColorLevel1 {
  // transform: translateX(-30px);
  // filter: drop-shadow(#7FD165 30px -2px 0px);
  // color: #7FD165 !important;
  background-color: #7FD165 !important;
}

.FlowColorLevel2 {
  // transform: translateX(-30px);
  // filter: drop-shadow(#309EF3 30px -2px 0px);
  // color: #309EF3 !important;
  background-color: #309EF3 !important;
}

.FlowColorLevel3 {
  // transform: translateX(-30px);
  // filter: drop-shadow(#E8E500 30px -2px 0px);
  // color: #E8E500 !important;
  background-color: #E8E500 !important;
}

.FlowColorLevel4 {
  // transform: translateX(-30px);
  // filter: drop-shadow(#F2A408 30px -2px 0px);
  // color: #F2A408 !important;
  background-color: #F2A408 !important;
}

.FlowColorLevel5 {
  // transform: translateX(-30px);
  // filter: drop-shadow(#EF3C45 30px -2px 0px);
  // color: #EF3C45 !important;
  background-color: #EF3C45 !important;
}

.FlowColorLevel6 {
  // transform: translateX(-30px);
  // filter: drop-shadow(#964FD2 30px -2px 0px);
  // color: #964FD2 !important;
  background-color: #964FD2 !important;
}

.FlowColorLevel7 {
  // transform: translateX(-30px);
  // filter: drop-shadow(#C93EC0 30px -2px 0px);
  // color: #C93EC0 !important;
  background-color: #C93EC0 !important;
}

.noDataList {
  color: #fff;
  background-color: transparent;
}

.tab {
  width: 100%;
  margin-left: 0px;
  justify-content: space-between;

  .tabTit {
    font-size: 14px;
    padding: 0;
    width: 49%;
    margin: 0px;
    box-sizing: border-box;
  }
}

.noData2{
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background: url(../../../../assets/newimg/notAvailableData.png)  no-repeat;
  background-position: center 37%;
  background-size: auto;
  padding-top: 46%;
  height: 300px;
}
</style>
